<template>
	<ly-drawer :visible="show" mode="right" width="80%" @close="handleClose">
		<view class="footer">
			<view class="button confirm" @tap="handleConfirm">确定</view>
			<view class="button cancle" @tap="handleClose"></view>
		</view>
		<scroll-view :scroll-y="true" style="margin-top: 60rpx;" :style="{
				height:appWrapperHeight
			}">
			<ly-tree :default-checked-keys="checkedKeys" :tree-data="treeData" :props="defaultProps" node-key="label"
				show-checkbox :expand-on-check-node="expandOnCheckNode" @check="handleCheck"
				@check-change="handleCheckChange" />


			<!-- <ly-tree :tree-data="treeData" show-radio node-key="id" @check="handleCheck" /> -->
		</scroll-view>


	</ly-drawer>
</template>

<script>
	import LyDrawer from './ly-drawer.vue'
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		name: 'lyTreeDrawer',

		components: {
			LyDrawer,
			LyTree
		},

		data() {
			const sysInfo = uni.getSystemInfoSync();

			return {
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				expandOnCheckNode: false, // 是否展开选中的节点
				showTree: false,
				// #ifdef H5
				appWrapperHeight: (sysInfo.screenHeight - uni.upx2px(100)) + 'px',
				// #endif
				// #ifndef H5
				appWrapperHeight: (sysInfo.windowHeight - uni.upx2px(100)) + 'px',
				// #endif
				// treeData: [{
				// 	id: 1,
				// 	label: '一级 1',
				// 	children: [{
				// 		id: 3,
				// 		label: '二级 2-1',
				// 		children: [{
				// 			id: 4,
				// 			label: '三级 3-1-1'
				// 		}, {
				// 			id: 5,
				// 			label: '三级 3-1-2'
				// 		}]
				// 	}, {
				// 		id: 2,
				// 		label: '二级 2-2',
				// 		children: [{
				// 			id: 6,
				// 			label: '三级 3-2-1'
				// 		}, {
				// 			id: 7,
				// 			label: '三级 3-2-2'
				// 		}]
				// 	}],
				// }, {
				// 	id: 21,
				// 	label: '一级 21',
				// 	children: [{
				// 		id: 23,
				// 		label: '二级 2-2-1',
				// 		children: [{
				// 			id: 24,
				// 			label: '三级 2-3-1-1'
				// 		}, {
				// 			id: 25,
				// 			label: '三级 2-3-1-2'
				// 		}]
				// 	}, {
				// 		id: 22,
				// 		label: '二级 2-2-2',
				// 		children: [{
				// 			id: 26,
				// 			label: '三级 2-3-2-1'
				// 		}, {
				// 			id: 27,
				// 			label: '三级 2-3-2-2'
				// 		}]
				// 	}],
				// }, {
				// 	id: 31,
				// 	label: '一级 31',
				// 	children: [{
				// 		id: 33,
				// 		label: '二级 3-2-1',
				// 		children: [{
				// 			id: 34,
				// 			label: '三级 3-3-1-1'
				// 		}, {
				// 			id: 35,
				// 			label: '三级 3-3-1-2'
				// 		}]
				// 	}, {
				// 		id: 32,
				// 		label: '二级 3-2-2',
				// 		children: [{
				// 			id: 36,
				// 			label: '三级 3-3-2-1'
				// 		}, {
				// 			id: 37,
				// 			label: '三级 2-3-2-2'
				// 		}]
				// 	}],
				// }],
				selectedData: ""
			}
		},

		props: {
			show: Boolean,
			treeData: {
				type: Array,
				default: () => []
			},
			checkedKeys: {
				type: Array,
				default: () => []
			},

		},

		methods: {
			handleCheck(obj) {
				if (obj.node.checked) {
					this.selectedData = obj.data;
				} else {
					this.selectedData = void 0;
				}
			},

			handleClose() {
				this.$emit('close');
			},

			handleConfirm() {
				this.$emit('confirm', this.selectedData);
			},
			// 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
			handleCheck(obj) {
				console.log(1)
				// obj: {
				// 	checkedKeys: [9, 5], // 当前选中节点的id数组
				// 	checkedNodes: [{...}, {...}], // 当前选中节点数组
				// 	data: {...}, // 当前节点的数据
				// 	halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
				// 	halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
				// 	node: Node {...} // 当前节点实例
				// }
				// this.$emit('confirm', this.selectedData);
				var str="";
				var data=obj.checkedNodes.map(item => {
				return	item.label
				})
				this.selectedData=data.join(",")
				// console.log()
				// console.log('handleCheck', data.join(","));

			},

			// 只要节点的选中或半选中状态改变就触发（包括设置默认选中，点击选中/取消选中），其相关的所有父子节点都会触发（也就是说选中一个节点时，触发多次，父子节点的选中状态只要被修改就会触发）
			handleCheckChange(obj) {
				console.log(2)
				// obj: {
				// 	checked: true, // 节点是否选中
				// 	checkedall: false, // 当前树的所有节点是否全选中
				// 	data: {...}, // 节点数据
				// 	indeterminate: false, // 是否半选中
				// 	node: Node {...} // 节点实例
				// }

				console.log('handleCheckChange', obj);
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		position: fixed;
		z-index: 998;
		left: 0;
		top: 0;
		background: #FFFFFF;
		width: 100%;
		height: 60rpx;
		overflow: hidden;
		// box-shadow: 1rpx 1rpx 8px #c7c7c7;
		margin-bottom: 100rpx;
	}

	.footer .button {
		width: 50%;
		border: none;
		text-align: right;
		padding: 0 30rpx;
		float: right;
		font-size: 30rpx;
		border-radius: 0;
		height: 60rpx;
		line-height: 60rpx;
		color: #007aff;
	}

	// .footer .button:after {
	// 	width: 0;
	// 	height: 0;
	// }

	// .footer .button.confirm {
	// 	background: #409EFF;
	// 	color: #fff;
	// }

	// .footer .button.cancle {
	// 	background: #f5f5f5;
	// }
</style>
